import React from 'react'
import { Card } from 'antd'
import ReactEcharts from 'echarts-for-react';
import echartTheme from '../echartTheme'
// import echarts from 'echarts'
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts'
// 引入饼图和折线图
import 'echarts/lib/chart/bar'
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/markPoint';
export default class Bar extends React.Component{
    componentWillMount() {
        //通过echarts注入主题
        echarts.registerTheme('Imooc',echartTheme)
    }
    getOption = () => {
       let option = {
        color: ['#3398DB'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '直接访问',
                type: 'bar',
                barWidth: '60%',
                data: [10, 52, 200, 334, 390, 330, 220]
            }
        ]
       
    }
    return option;
}
getOption2 = () => {
    let option = {
        legend: {},
        tooltip: {},
        dataset: {
            source: [
                ['product', '2015', '2016', '2017'],
                ['Matcha Latte', 43.3, 85.8, 93.7],
                ['Milk Tea', 83.1, 73.4, 55.1],
                ['Cheese Cocoa', 86.4, 65.2, 82.5],
                ['Walnut Brownie', 72.4, 53.9, 39.1]
            ]
        },
        xAxis: {type: 'category'},
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'}
        ]
 }
 return option;
}
getOption3 = () => {
    let option = {
     color: ['#3398DB'],
     tooltip: {
         trigger: 'axis',
         axisPointer: {            // 坐标轴指示器，坐标轴触发有效
             type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
         }
     },
     legend:{
         data:['OFO',"膜拜","小兰"]
     },
     grid: {
         left: '3%',
         right: '4%',
         bottom: '3%',
         containLabel: true
     },
     xAxis: [
         {
             type: 'category',
             data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
             axisTick: {
                 alignWithLabel: true
             }
         }
     ],
     yAxis: [
         {
             type: 'value'
         }
     ],
     series: [
         {
             name: 'OFO',
             type: 'bar',
             data: [10, 52, 200, 334, 390, 330, 220]
         },
         {
            name: '膜拜',
            type: 'bar',
           
            data: [10, 52, 200, 334, 390, 330, 220]
        },
        {
            name: '小兰',
            type: 'bar',
           
            data: [10, 52, 200, 334, 390, 330, 220]
        }

     ]
    
 }
 return option;
}
    render() {
        return (
            <div>
                <Card title="柱形图表一">
                    <ReactEcharts style={{height:500}} option={this.getOption()} theme="Imooc"/>
                </Card>
                <Card title="柱形图表一" style={{marginTop:10}}>
                <ReactEcharts style={{height:500}} option={this.getOption2()} theme="Imooc"/>
                </Card>
                <Card title="柱形图表一" style={{marginTop:10}}>
                <ReactEcharts style={{height:500}} option={this.getOption3()} theme="Imooc"/>
                </Card>
            </div>

        )
    }
}